<template>
  <div class="container">
    <div class="header">
      <span class="c-font-20 c-font-b">角色管理</span>
      <TsButton
        label="新增"
        perms="roles:post"
        type="primary"
        size="mini"
        @click="edit"
      ></TsButton>
    </div>
    <div class="role-box">
      <div class="role-item" v-for="(item, index) in roleList" :key="index">
        <!--        头像区域-->
        <div class="item-avatar">
          <div class="block">
            <el-avatar
              :size="50"
              :src="
                item.avatarUrl
                  ? item.avatarUrl
                  : 'https://www.mingxiaobang.cn/upload/admin/admin_user.png'
              "
            ></el-avatar>
          </div>
          <div class="user-name">
            <span class="c-font-20 c-font-b c-m-b-10">{{ item.name }}</span>
          </div>
          <!--          职责说明-->
          <div class="job-desc" style="color: #333333; margin: 20px 0">
            <span class="c-font-12">{{ item.remark }}</span>
          </div>
          <!--          删除按钮-->
          <div class="item-btn" style="width: 100%; display: flex">
            <TsButton
              perms="roles:$id:delete"
              label="删除"
              type="danger"
              size="mini"
              style="width: 100%"
              @click="del(item.id)"
            ></TsButton>
            <TsButton
              perms="roles:$id:put"
              label="编辑"
              size="mini"
              type="primary"
              style="width: 100%"
              @click="edit(item)"
            ></TsButton>
          </div>
        </div>
      </div>
    </div>
    <!--        添加编辑对话框-->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="50%"
      :before-close="handleClose"
    >
      <!--          表单区域-->
      <el-form
        ref="ruleForm"
        :model="editForm"
        :rules="editRule"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职责说明" prop="remark">
          <el-input v-model="editForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <!--          树形权限区域-->
      <div class="tree">
        <div class="tree-left" style="flex: 1">
          <span class="c-font-16 c-font-b">系统权限:</span>
          <el-tree
            ref="treeRef"
            :data="rightData"
            :check-strictly="true"
            :props="defaultProps"
            default-expand-all
            node-key="id"
            style="overflow-y: auto; margin-top: 10px; height: 250px"
            show-checkbox
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import roleManagement from "@/composables/system/role-management";
import TsButton from "../../components/TsButton";
export default {
  components: { TsButton },
  setup() {
    const {
      dialogTitle,
      submit,
      cancel,
      treeRef,
      defaultProps,
      roleList,
      changeChecked,
      del,
      edit,
      dialogVisible,
      editForm,
      defalutChecked,
      editRule,
      rightData,
      optionTree,
      ruleForm,
      handleClose,
    } = roleManagement();
    return {
      dialogTitle,
      cancel,
      ruleForm,
      defalutChecked,
      treeRef,
      defaultProps,
      roleList,
      submit,
      optionTree,
      rightData,
      editForm,
      editRule,
      dialogVisible,
      edit,
      del,
      changeChecked,
      handleClose,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 180px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  opacity: 1;
  border-radius: 6px;
  overflow-y: auto;
  .header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .role-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    .role-item {
      width: 246px;
      display: flex;
      flex-direction: column;
      padding: 10px;
      margin: 20px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      .item-header {
        flex: 1;
        text-align: right;
      }
      .item-avatar {
        margin: 20px 53px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .tree {
    display: flex;
  }
}
</style>
